<template>
  <div class="myEditWrapper">
    <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />
    <div class="main">
      <van-cell-group>
        <van-cell title="头像" is-link class="photo">
          <input type="file" hidden ref="file" @change="fileChange()" />
          <div slot="default" @click="isShowPhotoEdit()">
            <img :src="datas.photo" alt="" />
          </div>
        </van-cell>
        <van-cell title="昵称" :value="datas.name" is-link />
        <van-cell title="介绍" :value="datas.mobile" is-link />
        <van-cell
          title="性别"
          class="sex"
          :value="datas.gender === 1 ? '女' : '男'"
          is-link
        />
        <van-cell title="生日" :value="datas.birthday" is-link />
      </van-cell-group>
    </div>
    <!-- 头像弹出层 -->
    <van-popup
      v-model="showPhotoEdit"
      closeable
      position="bottom"
      :style="{ height: '100%' }"
    >
      <edit-photo :img="photo" :key="photo" @cancel="showPhotoEdit=false" @changePhpto="datas.photo=$event"></edit-photo>
    </van-popup>
  </div>
</template>

<script>
import { getUserDatum } from '@/api/my/userinfo.js'
import editPhoto from '../edit-photo'
export default {
  data () {
    return {
      datas: {},
      showPhotoEdit: false,
      photo: null
    }
  },
  props: {
    userId: { type: [Number, String], require: true }
  },
  mounted () {},
  created () {
    this.initInfo()
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    async initInfo () {
      const { data } = await getUserDatum(this.userId)
      this.datas = data.data
    },
    // 点击弹出选择图片
    isShowPhotoEdit () {
      this.$refs.file.click()
    },
    // 当图片文件对象变化时
    fileChange () {
      this.showPhotoEdit = true
      const fileObj = this.$refs.file.files[0]
      // 把照片转化为url地址的blog类型
      this.photo = window.URL.createObjectURL(fileObj)
      // 清空表单数据用于当用户重复打开一个文件时vue的Diff算法会不会帮你渲染页面
      this.$refs.file.value = ''
    }
  },
  components: { editPhoto }
}
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
